<template>
	<view class="content">
		<view class="top_tx">
			<view class="touxiang_kuang" @click="login()">
				<image class="tx_img" :src="tximg" mode="scaleToFill"></image>
				<view style="display: flex; align-items: center; height: 30rpx; margin-top: 20rpx;">
					<text>ID：{{nameID}}</text>
					<image style="width:50rpx; height: 25rpx; margin-left: 15rpx;" src="../../static/image/vip.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		<!-- 开通 -->
		<view class="kaitong">
			<!-- 会员充值 -->
			<view class="chonghzi">
				<text>升级VIP下载更多超清图片！</text>
				<view class="kt-nvt" @click="chongzhi">
					立即开通
				</view>
			</view>
			<!-- 收藏 -->
			<view class="sc-cc" v-for="(item,index) in GongNeng" :key="index" @click="tiaozhuan(index)">
				<view v-if="index!==4" class="l_img" :style="index==2?'display:none;':''">
					<image :src="item.image" mode="scaleToFill"></image>
					<text>{{item.name}}</text>
				</view>
				<button v-else="index==4" class="l_img" open-type="contact" plain="true">
					<image :src="item.image" mode="scaleToFill"></image>
					<text>{{item.name}}</text>
				</button>
				<button v-show="index==2" class="l_img" open-type="share">
					<image :src="item.image" mode="scaleToFill"></image>
					<text>{{item.name}}</text>
				</button>
				<image class="r-jiantou" src="../../static/image/baise.png" mode="scaleToFill"></image>
			</view>
		</view>
		
		<text style="color: #fff; font-size:24rpx; margin-top: 100rpx;">版本号 1.6.1</text>
	</view>
</template>

<script>
	import W_request from '@/utis/api'
	export default {
		data() {
			return {
				GongNeng:[
					{name:"我的收藏",image:"../../static/image/shoucang.png"},
					{name:"我的下载",image:"../../static/image/xiazai (2).png"},
					{name:"分享好友",image:"../../static/image/zhifeiji.png"},
					{name:"关于我们",image:"../../static/image/guanyuwomen (2).png"},
					{name:"联系客服",image:"../../static/image/kefu (2).png"},
					{name:"设置",image:"../../static/image/shezhi.png"},
				],
				nameID:'O-HiYdV f5',
				tximg:'../../static/image/shijiandege.jpg'
			}
		},
		onShareAppMessage(res) {
			
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '荟漫图坊',
		      path: '/pages/index/index',
			  imageUrl:'../../static/image/shijiandege.jpg',
			  
		    }
		},
		methods:{
			//点击跳转
			tiaozhuan(index){
				console.log(index);
				switch (index) {
					case 0:
						uni.navigateTo({
							url:'/pages/index/W/shoucang'
						});
						break;
					case 1:
						uni.navigateTo({
							url:'/pages/index/W/xiazai'
						});
						break;
					case 2:
						
						break;
					case 3:
						uni.navigateTo({
							url:'/pages/index/W/gywm'
						});
						break;
					case 4:
						
						break;
					case 5:
						uni.navigateTo({
							url:'/pages/index/W/shezhi/shezhi'
						});
						break;
				}
			},
			//去充值页面
			chongzhi(){
				uni.navigateTo({
					url:'/pages/index/W/chongzhi'
				});
			},
			//登录
			login(){
				uni.showLoading({
					title: '登录中',
					mask:true
				});
				uni.getUserProfile({
					desc:"微信登录",
					success:(Lonres)=>{
						console.log(Lonres);
						uni.login({
							provider: 'weixin', //使用微信登录
							success: function (loginRes) {
								console.log(loginRes);
								W_request({
									url: '/api/index/phone',
									data:{
										code:loginRes.code,
										iv:Lonres.iv,
										encryptedData: Lonres.encryptedData
									},
									header: {
										'platform': 'wxMiniProgram' //自定义请求头信息 - 海林比加
									},
									method:'POST'
								}).then(res=>{
									console.log(res);
									uni.hideLoading();
									uni.showToast({
										title: '登录成功',
										duration: 1000
									});
								},err=>{
									console.log("请求失败")
									uni.hideLoading();
								})
							}
						});
					}
				});
				
			}
		}
	}
</script>

<style scoped lang="scss">
	@font-face {
	  font-family: 'YouSheBiaoTiHei';
	  src: url('https://kuaiyinvideo.oss-cn-beijing.aliyuncs.com/ziti.ttf');
	}
	.content{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.top_tx{
			width: 100%;
			height: 500rpx;
			display: flex;
			justify-content: center;
			// background-color: #aaaaff;
			align-items:flex-end;
			.touxiang_kuang{
				height: 230rpx;
				// background-color: #55aa7f;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 50rpx;
				.tx_img{
					width: 150rpx;
					height: 150rpx;
					border-radius: 100rpx;
				}
				text{
					font-size: 27rpx;
					color: #fff;
					font-weight: bold;
				}
			}
		}
		
		.kaitong{
			width: 93%;
			background-color: rgb(29, 34, 38);
			border-radius: 15rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.chonghzi{
				width: 100%;
				height: 90rpx;
				background-image: linear-gradient(160deg,rgb(257,57,39),rgb(257,164,39));
				display: flex;
				align-items: center;
				justify-content: space-around;
				text{
					font-size: 37rpx;
					font-family: "YouSheBiaoTiHei";
					color: #f0f0f0;
				}
				.kt-nvt{
					padding: 15rpx 27rpx;
					font-size: 26rpx;
					background-color: #fff;
					border-radius: 50rpx;
					color: rgb(257,57,39);
				}
			}
			
			.sc-cc{
				width: 93%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 15rpx 0rpx;
				button::after { border: none }
				.l_img{
					width: 90%;
					display: flex;
					align-items: center;
					margin: 0 0;
					border: none;
					padding: 0 0;
					background: none;
					image{
						width: 45rpx;
						height: 45rpx;
						margin-right: 20rpx;
					}
					text{
						font-size:27rpx;
						color: #fff;
					}
				}
				.r-jiantou{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>
